#{extends 'main.html' /}
#{set title:'CoolSoft - User Stories' /}
#{set roles1:''/}
*{"users","comp" and "userStories" are two lists of all availble users and components}*
<h2><a style ="color:#400040;" href = "@{Projects.showProject(project.getEntityId())}">${project.name}</a> > <a style ="color:#400040;" href = "@{UserStories.listStories(project.getEntityId())}">User Stories</a> > Create</h2>
<hr/>
<form action="javascript:send_to_controller()" name="userStory" class="jqtransform" id="form" method="POST">
    As a/an:
    <br/>
    <br/>
    <div id="app_roles">
        #{list items:appRoles, as:'appRole'} <input type = "checkbox" value = "${appRole.getEntityId()}" name = "appRoleIds" id = "appRoleIds" class="validate[minCheckbox[1]]">${appRole.name}
        <br/>
        <br/>
        #{/list}
    </div>
    <a href="create/${projectId}/2">+ Add New Role</a>
    <br/>
    <br>
    <label>
        Story description*:
    </label>
    <br>
    <br>
    <textarea rows="10" cols="30" name="story" id="story" class="validate[required]"></textarea>
    <br>
    <label>
        Effort estimation:
    </label>
    <br>
    <br>
    <input type="text" name="effortEstimation" id="effort" class="" />
    <br>
    <br>
    <br>
    <label>
        Priority:
    </label>
    <br>
    <br>
    <select name="priority" id="priority">
        <option value="Low">Low</option>
        <option value="Medium">Medium</option>
        <option value="High">High</option>
    </select>
    <br>
    <br>
    <br>
    <label>
        Component assigned:
    </label>
    <br>
    <br>
    <select name="component" id="component">
        #{list items:comp, as:'comp'} 
        #{if comp.name != 'Default component'} <option value="${comp.getEntityId()}">${comp.name}&nbsp;-&nbsp;${comp.project.name}</option>
        #{/if}
        #{/list}
    </select>
    <br>
    <br>
    <br>
    <label>
        Component Dependency:
    </label>
    <br>
    <br>
    <div id= "comp_dep">
        #{list items:comp2 ,as:'comp_dep'} 
        #{if comp_dep.name != 'Default component'} 
        &nbsp;<input type="checkbox" name="component_depId" value="${comp_dep.getEntityId()}" />${comp_dep.name}
        <br>
        <br>
        #{/if}
        #{/list}
    </div>
    <label>
        Story Dependency:
    </label>
    <br>
    <br>
    <br>
    <a id="choose_dep"href="#">Choose Stories</a>
    <br/>
    <br/>
    <div id='story_dep'>
        #{list items:userStories, as:'user_story'}
        #{list items:user_story.appRoles, as:'roles'}
        #{set roles1:roles1+roles.name+", " /}
        #{/list}
        <br>
        &nbsp;<input type="checkbox" name="userStoriesId" value="${user_story.getEntityId()}" id="user_story"/>As a/an #{get 'roles1' /} ${user_story.story}
        #{set roles1:''/}
        <br>
        #{/list}
        #{set roles1:''/}
        <br>
    </div>
    <label>
        Associate Demo Entry:
    </label>
    <br>
    <br>
    <br>
    <a id="show_demo"href="#">Choose Demo Entries</a>
    <br>
    <br>
    <div id='listOfDemoEntries'>
    </div>
    <a id="add_demo"href="#">+ Add new demo entry</a>
    <br>
    <br>
    <label>
        Associate to a Sprint:
    </label>
    <br>
    <br>
    <br>
    <div id="nothing">
        No upcoming Sprints !
    </div>
    #{list items: allEvents, as:'events'}
    <div id="sprint">
        <input type="checkbox" name="sprint" value="${events.getEntityId()}" id="sprintId" /> ${events.name}
        <font size="1">
        <i>
        &nbsp;-&nbsp;${events.startDate.getTime()}
        </font>
    </i>
    </div>
    <br>
    <script type="text/javascript">
        $("#nothing").hide();
    </script>
    #{/list}
    <br>
    <br>
    <input type="hidden" name="projectId" value="${projectId}" id="project"><input type="submit" name="submit" class="button" id="submit_btn" value="Submit" />
</form>
<div id='demo_entry'>
    <form name="demoEntry" class="jqtransform" id="form" method="POST">
        Description*:
        <textarea rows="10" cols="30" name="story" id="demo" class="validate[required]"></textarea>
        <div id="error">
        </div>
        Type*: 
        <br>
        <select name="type" id="type">
            <option value="Sucess">Sucess</option>
            <option value="Failure">Failure</option>
        </select>
        <br>
        <br>
        <br>
        <br>
        <br>
        <a id="create_demo" href="#">Create Demo</a>
    </form>
</div>
<div id='done'>
    Demo Entry Added Successfully! 
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $("#listOfDemoEntries").hide();
        $("#show_demo").colorbox({
            width: "30%",
            inline: true,
            href: "#listOfDemoEntries",
            onOpen: function(){
                $("#listOfDemoEntries").show();
            },
            onCleanup: function(){
                $("#listOfDemoEntries").hide();
            },
        });
        $("#demo_entry").hide();
        $("#done").hide();
        $("#add_demo").colorbox({
            width: "30%",
            inline: true,
            href: "#demo_entry",
            onOpen: function(){
                $("#demo_entry").show();
            },
            onCleanup: function(){
                $("#demo_entry").hide();
            },
        });
        $("#create_demo").colorbox({
            inline: true,
            href: "#done",
            onCleanup: function(){
                $("#done").hide();
                $("#demo_entry").hide();
            },
        });
        $("#story_dep").hide();
        $("#choose_dep").colorbox({
            width: "30%",
            inline: true,
            href: "#story_dep",
            onOpen: function(){
                $("#story_dep").show();
            },
            onCleanup: function(){
                $("#story_dep").hide();
            },
        });
    });
    
    $('#create_demo').click(function(){
        if ($('#demo').val() == "") {
            var error = '<FONT COLOR="#cc6600"> This is a required field </FONT>';
            $("#error").append($(error));
            $("#add_demo").colorbox.resize();
            return false;
        }
        else {
            var desc = $('#demo').val();
            var type = $('#type').val();
            $.post('@{DemoEntries.createDemoEntry()}', {
                demo: desc,
                type: type
            }, function(newDemo){
                if (newDemo.length == 0) {
                    $.fn.colorbox.close();
                    showDialog('Error', 'Duplicate Demo Entry', 'error');
                }
                else {
                    var html = '<div id="demo_entry_' + newDemo.id + '"><input type="checkbox" name="demoId" id="demoId" value="'+newDemo.id+'"CHECKED DISABLED/><div id="demo_desc_' + newDemo.id + '" style="display:inline">' + newDemo.demo +
                    '</div>&nbsp;&nbsp;<a onclick="javascript:confirm_delete(' +
                    newDemo.id +
                    ');" href="#">x</a>&nbsp;&nbsp; </div>';
                    $('#listOfDemoEntries').append($(html));
                }
                
            });
            $("#done").show();
            
            setTimeout($.fn.colorbox.close, 2000);
        }
        
    });
    function delete_demo(id){
        //$.fn.colorbox.close();		
        var demoId = id;
        $.post('@{DemoEntries.deleteDemoEntry()}', {
            demoId: demoId
        }, function(){
            $('#demo_entry_' + demoId).remove();
        });
    }
    
    function confirm_delete(id){
        $.fn.colorbox.close();
        showDialogHelper('Confirmation', 'Are you sure you want to delete this demo entry?', true, 'javascript:delete_demo(' + id + ')', 'prompt');
    }
    
    function send_to_controller(){
        var story = $('#story').val();
        var effort = $('#effort').val();
        var priority = $('#priority').val();
        var comp = $('#component').val();
        var project = $('#project').val();
        
        var sprintId = [];
        $('#sprint :checked').each(function(){
            sprintId.push($(this).val());
        });
        
        var comp_dep = [];
        $('#comp_dep :checked').each(function(){
            comp_dep.push($(this).val());
        });
        
        var story_dep = [];
        $('#story_dep :checked').each(function(){
            story_dep.push($(this).val());
        });
        
        var demo = [];
        $('#listOfDemoEntries :checked').each(function(){
            demo.push($(this).val());
        });
        
        
        var roles = [];
        $('#app_roles :checked').each(function(){
            roles.push($(this).val());
        });
        $.post('@{UserStories.createStory()}', {
            story: story,
            effortEstimation: effort,
            priority: priority,
            component: comp,
            userStoriesId: story_dep,
            component_depId: comp_dep,
            appRoleIds: roles,
            projectId: project,
            demoId: demo,
            sprintId: sprintId
        }, // firebug
     function(){
            showDialogHelper('Done', 'User Story added successfully !', false, '', 'success');
            $(':input', '#form').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');
        });
        
    }
    
    
    
    
</script>
